<template>
    <div class="createExamPaper">
        <!-- 顶部 -->
        <div class="createExamPaper-head">
            <div class="head-title">创建试卷</div>
            <el-button type="primary" class="head-btn" @click="addExamPaper(examPaperData)">保存</el-button>
        </div>
        <!-- 头部试卷名称 -->
        <div class="top">
            <div class="top-m1">
                <el-input v-model="examPaperData.epName" class="top-input" size="large" placeholder="请输入试卷名称" />
                <div class="m1-right">
                    <div>所属课程：</div>
                    <el-select v-model="examPaperData.belongCourseId" class="select" placeholder="请选择课程">
                        <el-option v-for="course in quesHeadData.courses" :label="course.label" :value="course.value"
                            @click="setCourseName(course.value)" />
                    </el-select>
                    <span><span class="num">{{ examPaperData.questions.length }}</span>大题</span><span
                        class="spancing">|</span>
                    <span><span class="num">{{ getExamNum(examPaperData.questions) }}</span>小题</span><span
                        class="spancing">|</span>
                    <span>总分<span class="num total">{{ getExamScore(examPaperData.questions) }}</span></span><span
                        class="spancing">|</span>
                </div>
            </div>
            <div class="top-m2">
                <div class="qualify-score">及格分数：<el-input style="width: 50px" v-model="examPaperData.qualifyScore" />
                </div>
                <el-switch v-model="examPaperData.epIsPublic" :active-value="1" :inactive-value="0" active-text="公开试卷"
                    inactive-text="私人试卷" />
            </div>
        </div>
        <!-- 题目主内容区 -->
        <div class="content">
            <!-- 左栏 -->
            <div class="left-box">
                <div class="left">
                    <div class="set-scores" @click="setScore"><i class="iconfont icon-shezhi"></i>批量设置分数</div>
                    <div class="left-body">
                        <div class="left-m1" v-for="(examQuestion, index1) in examPaperData.questions"
                            :key="examQuestion.typeName">
                            <div class="left-type">
                                {{ examQuestion.typeName }}（共<span class="left-num">{{ examQuestion.ques.length
                                    }}</span>题，合计<span class="left-num">{{ getQuesScore(examQuestion.ques) }}</span>分）
                            </div>
                            <div class="left-btns">
                                <button v-for="(item, index2) in examQuestion.ques" :key="item.questionId"
                                    class="content-left-btn" @click="scrollToQuestion(item.questionId)">{{ index2 + 1
                                    }}</button>
                            </div>
                            <el-divider />
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右栏 -->
            <div class="right-body">
                <div class="right">
                    <div class="right-btn">
                        <el-button type="primary" @click="selectQuestion()" class="right-head-btn"><i
                                class="iconfont icon-tianjia1"></i>从题库选择题目</el-button>
                    </div>
                    <div class="right-box" v-for="(examQuestion, index) in examPaperData.questions"
                        :key="examQuestion.typeName">
                        <div class="right-head">
                            <div class="head-m1">
                                <div class="head-m1-title">
                                    <span v-text="numToChina(index)" class="index-num"></span>
                                    <el-input v-model="examQuestion.typeName" placeholder="`${examQuestion.typeName}`"
                                        size="large"></el-input>
                                </div>
                                <div class="m2-right">
                                    <i class="iconfont icon-shanchu"
                                        @click="delMultipleQuesFromExamPaper(examQuestion)"></i>
                                    <div class="head-word">
                                        共<span class="head-num">{{ examQuestion.ques.length }}</span>题，合计<span
                                            class="head-num">{{
                                                getQuesScore(examQuestion.ques) }}</span>分
                                        <i class="iconfont icon-xiangxia" v-show="!examQuestion.show"
                                            @click="isShowQuestion(true, examQuestion)"></i>
                                        <i class="iconfont icon-xiangyou" v-show="examQuestion.show"
                                            @click="isShowQuestion(false, examQuestion)"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="right-body" v-show="!examQuestion.show">
                            <transition name="fade-slide" mode="out-in" appear>
                                <keep-alive>
                                    <div v-for="(item, i) in examQuestion.ques" :key="item.questionId"
                                        :id="item.questionId">
                                        <div class="small-num">
                                            <div class="ques-num">{{ i + 1 }}.</div>
                                            <div class="question-scorce-right">
                                                <i class="iconfont icon-shanchu"
                                                    @click="delQuesFromExamPaper(item)"></i>
                                                <span class="score-word">分数:</span>
                                                <el-input class="right-body-input" v-model="item.score"
                                                    style="width: 50px" />
                                            </div>
                                        </div>
                                        <component :is="getComponent(examQuestion.questionType)" :key="item.questionId"
                                            class="component" :questionId="item.questionId"></component>
                                    </div>
                                </keep-alive>
                            </transition>
                        </div>
                        <div class="right-foot">
                            <div class="choice-word" @click="selectQuestion(examQuestion.typeName)"><i
                                    class="iconfont icon-tianjia"></i>从题库选择题目
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- 添加试题弹框 -->
        <el-dialog v-model="addDialog" align-center width="70%" class="dialog" center>
            <template #header>
                <div class="dialog-header">选择试题</div>
            </template>
            <el-form class="questions-head" ref="ruleFormRef" :model="quesHeadData" :rules="rules">
                <div class="head-content-left">
                    <div class="option">
                        <span class="option-word">所属课程</span>
                        <el-form-item prop="belongCourseId">
                            <el-select v-model="quesHeadData.belongCourseId" class="select" placeholder="请选择课程"
                                size="small">
                                <el-option v-for="course in quesHeadData.courses" :label="course.label"
                                    :value="course.value" @click="getQueryBankListCourse(course.value)" />
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="option">
                        <span class="option-word">试题类型</span>
                        <el-form-item prop="quesType">
                            <el-select v-model="quesHeadData.quesType" class="select" placeholder="全部" size="small"
                                :disabled="disabledType">
                                <el-option v-for="item in categories" :label="item.label" :value="item.value"
                                    @click="getQueryType(item.value)" />
                            </el-select>
                        </el-form-item>
                    </div>
                </div>
                <div class="head-content-right">
                    <el-input v-model="search" placeholder="请输入题目" class="input">
                        <template #append>
                            <el-button class="iconfont icon-sousuo3" @click="searchByTitel"></el-button>
                        </template>
                    </el-input>
                </div>
            </el-form>
            <div class="change">
                <div class="change-item" :class="{ active: isActive === 1 }" @click="changeActive(1)">试题列表</div>
                <div class="change-item" :class="{ active: isActive === 2 }" @click="changeActive(2)">已选试题
                    <span class="choiced-num">{{ getChoicedNum(selectTableData) }}</span>
                </div>
            </div>
            <div class="table">
                <!-- 题目列表 -->
                <el-table :data="tableData" style="width: 100wh" border
                    :header-cell-style="{ 'text-align': 'center', background: '#f0f4f7', color: '#606266' }"
                    max-height="340" :row-style="{ height: '5vh' }" v-show="isActive == 1">
                    <el-table-column label="序号" type="index" width="80" align="center" />
                    <el-table-column prop="questionTitle" label="题目内容" max-width="230" min-width="140px" align="center"
                        :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="questionType" label="题型" max-width="100" align="center" />
                    <el-table-column prop="difficultLevel" label="难度" max-width="100" align="center" />
                    <!-- <el-table-column prop="knowledge" label="知识点" max-width="100" align="center" /> -->
                    <el-table-column prop="createTime" label="创建时间" max-width="180" min-width="100px" align="center" />
                    <el-table-column label="操作" align="center" min-width="90px">
                        <template #default="scope">
                            <el-button type="success" @click="addQuestionToExam(scope.row)"
                                :disabled="setDisabledAdd(scope.row)">
                                <i class="iconfont icon-tianjia"></i>
                                <span v-show="!setDisabledAdd(scope.row)">添加</span>
                                <span v-show="setDisabledAdd(scope.row)">已添加</span>
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 已选表格 -->
                <el-table :data="selectTableData" ref="multipleTable" style="width: 100wh" border
                    :header-cell-style="{ 'text-align': 'center', background: '#f0f4f7', color: '#606266' }"
                    max-height="340" :row-style="{ height: '5vh' }" v-show="isActive == 2">
                    <el-table-column label="序号" type="index" width="80" align="center" />
                    <el-table-column prop="questionTitle" label="题目内容" max-width="230" min-width="140px" align="center"
                        :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="questionType" label="题型" max-width="100" align="center" />
                    <el-table-column v-if="!route.query.epId" prop="difficultLevel" label="难度" max-width="100"
                        align="center" />
                    <el-table-column v-if="!route.query.epId" prop="createTime" label="创建时间" max-width="180"
                        min-width="100px" align="center" />
                    <el-table-column label="操作" align="center" min-width="90px">
                        <template #default="scope">
                            <el-popconfirm width="120" confirm-button-text="确认" cancel-button-text="取消"
                                @confirm="deleteSelectQuestion(scope.row)" title="确认删除?">
                                <template #reference>
                                    <el-button type="danger"><i class="iconfont icon-shanchu"></i>删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="foot">
                <div class="question-foot">
                    <el-pagination v-model:current-page="paginationData.pageNum"
                        v-model:page-size="paginationData.pageSize" :page-sizes="[20, 50, 100]"
                        :small="paginationData.small" layout="sizes, prev, pager, next"
                        :total="Number(paginationData.total)" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" class="pagination" />
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="info" class="dialog-btn">取消</el-button>
                    <el-button type="primary" class="dialog-btn" @click="addQUestions">确定</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 批量设置分数弹框 -->
        <el-dialog v-model="setScoreDialog" class="dialog2" center width="40%" align-center :show-close="false"
            :close-on-press-escape="false" :close-on-click-modal="false">
            <template #header>
                <div class="dialog-header">批量设置分数</div>
            </template>
            <table class="set-score-body">
                <tr class="score-m1" v-for="(examQuestion, index1) in examPaperData.questions"
                    :key="examQuestion.typeName">
                    <td class="score-type">{{ examQuestion.typeName }}</td>
                    <td class="score-middle">共<span class="score-num">{{ examQuestion.ques.length
                            }}</span>题</td>
                    <td class="score-foot">每题<el-input class="score-input" v-model="examQuestion.ques.scores"
                            style="width: 50px" placeholder="不同" />分</td>
                </tr>
            </table>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" class="dialog-btn" @click="addScoreQUestions">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { getQueryBankListAPI, getCourseListAPI, getCourseByIdAPI, addExamPaperAPI, selectExamPaperAPI, updateExamPaperAPI } from '@/api/api'
import { useRoute, useRouter } from 'vue-router';
import Choice from './questions/choice.vue';
import tianKong from './questions/tianKong.vue';
import tureFalse from './questions/tureFalse.vue';
import shortAnswer from './questions/shortAnswer.vue';
import material from './questions/material.vue';
import { ElMessage } from 'element-plus';
import { ElMessageBox } from 'element-plus';


const route = useRoute()
const router = useRouter()

const addDialog = ref(false)
const setScoreDialog = ref(false)
const ruleFormRef = ref(null)
// const choicedNum = ref(0)
const isActive = ref(1)
const tableData = ref([])
const selectTableData = ref([])
const disabledType = ref(true)
const search = ref('')
const multipleTable = ref()
//试卷信息
const examPaperData = ref({
    belongCourseId: sessionStorage.getItem('examCourseId'),
    epName: '',
    epIsPublic: 0,
    qualifyScore: '',
    questions: []
})
//组件题型
const originQuestionType = {
    "choice": Choice,
    "fill": tianKong,
    "judge": tureFalse,
    "answer": shortAnswer,
    "material": material,
}
//获取题型组件
const getComponent = (type) => {
    return originQuestionType[type]
}
//弹窗头部数据
const quesHeadData = ref({
    //题目类型
    quesType: '',
    //所属课程
    belongCourseId: '',
    //难度
    difficultLevel: '',
    //获取到的所有课程
    courses: [],
    //课程列表
    courseList: [],
})
//题型
const categories = ref([
    {
        label: "全部",
        value: '',
    },
    {
        value: 0,
        label: "选择题"
    },
    {
        value: 1,
        label: "填空题"
    },
    {
        value: 2,
        label: "判断题"
    },

    {
        value: 3,
        label: "简答题"
    },
    {
        value: 4,
        label: "材料题"
    },
])
//难度
const difficulties = reactive([
    {
        label: "简单",
        value: 0,
    },
    {
        label: "中等",
        value: 1
    },
    {
        label: "困难",
        value: 2
    },
])
//题目分页
const paginationData = reactive({
    pageSize: 20,
    total: 0,
    pageNum: 1,
    background: false,
    disabled: false,
    small: '',
})
// 验证规则
const rules = reactive({
    // quesType: [
    //     { required: true, message: "请选择题目类型", trigger: 'change' },
    // ],
    belongCourseId: [
        { required: true, message: "请选择所属课程", trigger: 'change' },
    ],
    difficultLevel: [
        { required: true, message: "请选择题目难度", trigger: 'change' },
    ],
    knowledge: [
        { required: true, message: "请选择知识点", trigger: 'change' },
    ],
})

onMounted(() => {
    //获取课程信息
    getCourseList()
    if (route.query.epId) {
        selectExamPaper(route.query.epId)

    }
})
//数字转中文
const numToChina = (index) => {
    if (index == 0) {
        return "一、"
    } else if (index == 1) {
        return "二、"
    } else if (index == 2) {
        return "三、"
    } else if (index == 3) {
        return "四、"
    } else if (index == 4) {
        return "五、"
    } else if (index == 5) {
        return "六、"
    } else if (index == 6) {
        return "七"
    }
}
//锚点滚动
const scrollToQuestion = (id) => {
    for (let i = 0; i < examPaperData.value.questions.length; i++) {
        const item = examPaperData.value.questions[i];
        item.show = false
    }
    const element = document.getElementById(id);
    element.scrollIntoView({
        behavior: "smooth", //smooth:平滑，auto：直接定位
        block: "center",
        inline: "center",
    });
}
//是否展示题目
const isShowQuestion = (value, examQuestion) => {
    examQuestion.show = value
}
//题目类型的值
const questionType = ref('')
//获得题目类型
const getQueryType = (value) => {
    questionType.value = value
    getQueryBankListCourse(sessionStorage.getItem('examCourseId'))
}
//根据title查询题目列表
const searchByTitel = async () => {
    getQueryBankListCourse(sessionStorage.getItem('examCourseId'))
}
//分页查询课程
const getCourseList = async () => {
    await getCourseListAPI().then(res => {
        if (res.data.code == 200) {
            quesHeadData.value.courseList = res.data.data.list
            getCourseName(quesHeadData.value.courseList)
            if (sessionStorage.getItem('examCourseId')) {
                getQueryBankListCourse(sessionStorage.getItem('examCourseId'))
                getCourseById(sessionStorage.getItem('examCourseId'))
            }
        }
    })
}
//设置课程名
const setCourseName = (courseId) => {
    sessionStorage.setItem('examCourseId', courseId)
}
//根据课程id查询课程名（单查）
const getCourseById = async (id) => {
    await getCourseByIdAPI(id).then(res => {
        quesHeadData.value.belongCourseId = res.data.data.courseName
        examPaperData.value.belongCourseId = res.data.data.courseName
    })
}
//获取课程名
const getCourseName = (courseList) => {
    for (let item of courseList) {
        quesHeadData.value.courses.push({
            label: item.courseName,
            value: item.id
        })
    }
}
//根据课程多查题目
const getQueryBankListCourse = async (id) => {
    sessionStorage.setItem('examCourseId', id)
    await getQueryBankListAPI(id, questionType.value, paginationData.pageNum, paginationData.pageSize, search.value).then(res => {
        if (res.status == 200) {
            paginationData.total = res.data.data.total
            wrapDifficultLevel(res.data.data.list)
            wrapQuestionType(res.data.data.list)
            tableData.value = res.data.data.list
        }
    })
}
//封装难度的值
const wrapDifficultLevel = (data) => {
    for (let item of data) {
        if (item.difficultLevel == 0) {
            item.difficultLevel = '简单'
        }
        if (item.difficultLevel == 1) {
            item.difficultLevel = '中等'
        }
        if (item.difficultLevel == 2) {
            item.difficultLevel = '困难'
        }
    }
}
//封装题型的值
const wrapQuestionType = (data) => {
    for (let item of data) {
        if (item.questionType == 0) {
            if (item.isSingleSelect == 0) {
                item.questionType = '单选题'
            } else {
                item.questionType = '多选题'
            }
        }
        if (item.questionType == 1) {
            item.questionType = '填空题'
        }
        if (item.questionType == 2) {
            item.questionType = '判断题'
        }
        if (item.questionType == 3) {
            item.questionType = '简答题'
        }
        if (item.questionType == 4) {
            item.questionType = '材料题'
        }
    }
}
//当一页的数量改变
const handleSizeChange = (newPageSize) => {
    paginationData.pageSize = newPageSize
    getQueryBankListCourse(sessionStorage.getItem('examCourseId'))
}
//第几页
const handleCurrentChange = (newCurrentPage) => {
    paginationData.pageNum = newCurrentPage
    getQueryBankListCourse(sessionStorage.getItem('examCourseId'))
}
//（已选）试题
const changeActive = (num) => {
    isActive.value = num
}
//选中的题目添加到页面
const addQUestions = () => {
    addDialog.value = false
    if (!route.query.epId) {
        setScoreDialog.value = true
    } else {
        examPaperData.value.questions = []
    }
    selectTableData.value.forEach((item, index) => {
        let questionType;
        if (item.questionType == '单选题' || item.questionType == '多选题') {
            questionType = 'choice'
        }
        if (item.questionType == '填空题') {
            questionType = 'fill'
        }
        if (item.questionType == '判断题') {
            questionType = 'judge'
        }
        if (item.questionType == '简答题') {
            questionType = 'answer'
        } if (item.questionType == '材料题') {
            questionType = 'material'
        }
        if (examPaperData.value.questions.length != 0) {
            let flag = 0
            for (let i = 0; i < examPaperData.value.questions.length; i++) {
                if (examPaperData.value.questions[i].typeName == item.questionType) {
                    flag = 1
                    examPaperData.value.questions[i].ques.push(item)
                    break;
                }
            }
            if (flag == 0) {
                examPaperData.value.questions.push({
                    typeName: item.questionType,
                    questionType: questionType,
                    show: false,
                    desc: '填写答案',
                    ques: [item],
                })
            }
        } else {
            examPaperData.value.questions.push({
                typeName: item.questionType,
                questionType: questionType,
                show: false,
                desc: '填写答案',
                ques: [item],
            })
        }
    })
}
//弹窗改变题目类型
const selectQuestion = (value) => {
    if (value == undefined) {
        disabledType.value = false
        questionType.value = ''
    } else {
        if (value == '单选题' || value == '多选题') {
            quesHeadData.value.quesType = 0
            questionType.value = 0
        } else if (value == '填空题') {
            quesHeadData.value.quesType = 1
            questionType.value = 1
        } else if (value == '判断题') {
            quesHeadData.value.quesType = 2
            questionType.value = 2
        } else if (value == '简答题') {
            quesHeadData.value.quesType = 3
            questionType.value = 3
        } else if (value == '材料题') {
            quesHeadData.value.quesType = 4
            questionType.value = 4
        }
        disabledType.value = true
    }
    getQueryBankListCourse(sessionStorage.getItem('examCourseId'))
    addDialog.value = true
}
//批量设置分数弹框
const setScore = () => {
    for (let i = 0; i < examPaperData.value.questions.length; i++) {
        const element = examPaperData.value.questions[i];
        let score;
        for (let j = 0; j < element.ques.length; j++) {
            const item = element.ques[j];
            score = item.score
        }
        if (!element.ques.scores) {
            element.ques.scores = score
        }
    }
    setScoreDialog.value = true
}
//添加试题到已选表格
const addQuestionToExam = (row) => {
    selectTableData.value.push(row)
}
//从已选中删除
const deleteSelectQuestion = (row) => {
    selectTableData.value = selectTableData.value.filter(item => {
        return item != row
    })
}
//计算已选试题的数量
const getChoicedNum = (selectTableData) => {
    return selectTableData.length
}
//计算该试题是否被添加，被添加了按钮设置为禁用
const setDisabledAdd = (row) => {
    for (let i = 0; i < selectTableData.value.length; i++) {
        const element = selectTableData.value[i];
        if (row.questionId == element.questionId) {
            return true
        }
    }
    return false
}
//求该题型总分
const getQuesScore = (arr) => {
    let sum = 0
    arr.forEach(element => {
        if (element.score) {
            sum += parseInt(element.score)
        }
    });
    return sum
}
//求试卷总分
const getExamScore = (arr) => {
    let sum = 0
    for (let i = 0; i < arr.length; i++) {
        const element = arr[i];
        for (let j = 0; j < element.ques.length; j++) {
            const element1 = element.ques[j];
            if (element1.score) {
                sum += parseInt(element1.score)
            }
        }
    }
    return sum
}
//试卷小题数目
const getExamNum = (arr) => {
    let sum = 0
    for (let i = 0; i < arr.length; i++) {
        const element = arr[i];
        for (let j = 0; j < element.ques.length; j++) {
            sum += 1
        }
    }
    return sum
}
//批量设置好分数后渲染
const addScoreQUestions = () => {
    for (let i = 0; i < examPaperData.value.questions.length; i++) {
        const element = examPaperData.value.questions[i];
        for (let j = 0; j < element.ques.length; j++) {
            const item = element.ques[j];
            item['score'] = parseInt(element.ques.scores)
        }
    }
    setScoreDialog.value = false
}
//保存
const addExamPaper = async (value) => {
    // const data = value    浅拷贝方式，引用地址复制，修改data的值value的值也会改变
    let data = JSON.parse(JSON.stringify(value))    //深拷贝，有了新的内存
    data.belongCourseId = parseInt(sessionStorage.getItem('examCourseId'))
    data.qualifyScore = parseInt(data.qualifyScore)
    for (let i = 0; i < data.questions.length; i++) {
        const element = data.questions[i];
        delete element['show']
        delete element.ques.scores
        for (let j = 0; j < element.ques.length; j++) {
            const item = element.ques[j];
            if (item.difficultLevel == '简单') { item.difficultLevel = 0 }
            if (item.difficultLevel == '中等') { item.difficultLevel = 1 }
            if (item.difficultLevel == '困难') { item.difficultLevel = 2 }
            if (item.questionType == '单选题' || item.questionType == '多选题') { item.questionType = 0 }
            if (item.questionType == '填空题') { item.questionType = 1 }
            if (item.questionType == '判断题') { item.questionType = 2 }
            if (item.questionType == '简答题') { item.questionType = 3 }
            if (item.questionType == '材料题') { item.questionType = 4 }
            item.parentId = item.questionId
            const arr = ['questionId', 'correctAmount', 'createTime', 'creator', 'errorAmount', 'questionItem', 'questionNumber', 'updateTime', 'updater', 'usedTime', 'questionUsed']
            arr.forEach(function (k) {
                delete item[k];
            });
            if (item.questionType != '0') {
                delete item['optionsList'];
            }
            if (item.questionType != '1') {
                delete item['outOfOrder'];
            }
        }
    }
    //保存更新试卷
    if (route.query.epId) {
        await updateExamPaperAPI(data).then(res => {
            if (res.data.code == 200) {
                ElMessage.success('试卷更新成功')
                router.push({
                    path: '/adminHome/examPaper'
                })
            }
        })
    } else {
        //保存手动组卷
        await addExamPaperAPI(data).then(res => {
            if (res.data.code == 200) {
                ElMessage.success('试卷创建成功')
                router.push({
                    path: '/adminHome/examPaper'
                })
            }
        })
    }

}
//试卷信息
// const examPaperData = ref({
//     belongCourseId: sessionStorage.getItem('examCourseId'),
//     epName: '',
//     epIsPublic: 0,
//     qualifyScore: '',
//     questions: []
// })
//
const selectExamPaper = async (epId) => {
    await selectExamPaperAPI(epId).then(res => {
        for (let i = 0; i < res.data.data.questions.length; i++) {
            const element = res.data.data.questions[i];
            let score;
            for (let j = 0; j < element.ques.length; j++) {
                const item = element.ques[j];
                score = item.score
                if (item.questionType == 0) {
                    if (item.isSingleSelect == 0) {
                        item.questionType = '单选题'
                    } else {
                        item.questionType = '多选题'
                    }
                }
                if (item.questionType == 1) {
                    item.questionType = '填空题'
                }
                if (item.questionType == 2) {
                    item.questionType = '判断题'
                }
                if (item.questionType == 3) {
                    item.questionType = '简答题'
                } if (item.questionType == 4) {
                    item.questionType = '材料题'
                }

            }
            element.ques.scores = score
        }
        examPaperData.value = res.data.data
        for (let i = 0; i < examPaperData.value.questions.length; i++) {
            const element = examPaperData.value.questions[i];
            for (let j = 0; j < element.ques.length; j++) {
                const value = element.ques[j];
                selectTableData.value.push(value)
            }
        }
    })
}
//从试卷中删除题目（删小题）
const delQuesFromExamPaper = (item) => {
    ElMessageBox.confirm(
        '确定删除该题目?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            showClose: false,
        }
    )
        .then(() => {
            for (let i = 0; i < examPaperData.value.questions.length; i++) {
                const element = examPaperData.value.questions[i];
                for (let j = 0; j < element.ques.length; j++) {
                    const value = element.ques[j];
                    if (value.questionId = item.questionId) {
                        const typeName = element
                        element.ques = element.ques.filter(v => {
                            return v != element.ques[j]
                        })
                        if (element.ques.length == 0) {
                            delMultipleQuesFromExamPaper(typeName)
                        }
                        return
                    }
                }
            }
            ElMessage({
                type: 'success',
                message: '成功删除',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })

}
//从试卷中删除题目（删大题）
const delMultipleQuesFromExamPaper = (item) => {
    ElMessageBox.confirm(
        '确定删除该题型?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            showClose: false,
        }
    )
        .then(() => {
            examPaperData.value.questions = examPaperData.value.questions.filter(value => {
                return value.typeName != item.typeName
            })
            ElMessage({
                type: 'success',
                message: '成功删除',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}

</script>


<style lang="less">
.el-dialog__header {
    margin: 0 !important;
    background-color: #f8f8f8 !important;
    border-bottom: 1px solid #eeeeee;
}

.el-dialog__footer {
    background-color: #f0f4f7 !important;
    padding: 10px !important;
    border-top: 1px solid #eeeeee;
}

.set-score-body {
    display: block;
    min-height: 300px;

    .score-m1 {
        display: flex;
        justify-content: space-around;
        padding: 5px 0;
        font-size: 15px;

        .score-type {
            margin-top: 4px;
        }

        .score-middle {
            margin-top: 4px;

        }

        .score-foot {
            .score-input {
                margin: 0 6px;
            }
        }
    }

    tr:nth-child(odd) {
        background-color: #fafafa;
    }

    tr:hover {
        background-color: #f0f4f7;
    }

}

.el-message-box {
    background-color: #fff;
    width: 250px;
    height: 110px;
    margin: 200px auto;
    padding: 10px 20px;
    border-radius: 10px;

    .el-message-box__message {
        margin: auto;
    }

    .el-message-box__btns {
        margin-left: 110px;
    }

}
</style>
<style lang="less" scoped>
.createExamPaper {
    background-color: #f1f3f8;

    .createExamPaper-head {
        display: flex;
        justify-content: space-between;
        min-height: 45px;
        border-bottom: 1px solid #bbc5da;
        margin: 15px 0;

        .head-title {
            font-size: 18px;
            font-weight: 550;
            color: grey;
            padding: 0px 10px;
        }

        .head-btn {
            margin: 0px 30px;
        }
    }

    .top {
        min-height: 78px;
        background-color: #fff;
        padding: 30px 20px 15px 20px;

        .top-m1 {
            display: flex;
            justify-content: space-between;

            .top-input {
                height: 45px;
                max-width: 600px;
            }

            /deep/ .el-input__inner {
                font-size: 15px;
                font-style: italic;
                color: #606266;
            }

            /deep/ .el-input__inner::placeholder {
                color: #606266;
                font-size: 15px;
                font-style: italic;
            }
        }

        .top-m2 {
            display: flex;
            justify-content: end;
            margin-top: 20px;

            .qualify-score {
                margin-right: 40px;
            }
        }

        .m1-right {
            min-width: 300px;
            display: flex;

            .select {
                width: 120px;
                margin-right: 10px;
                margin-top: -3px;
            }

            .num {
                padding: 0 5px;
            }

            .total {
                color: #409eff;
            }

            .spancing {
                padding: 0 10px;
            }
        }
    }

    .content {
        display: flex;

        .left-box {
            min-width: 300px;
            position: relative;

            .left {
                min-height: 340px;
                min-width: 230px;
                background-color: #fff;
                margin: 20px 30px 20px 0;
                padding: 20px;
                float: left;
                position: sticky;
                top: 10px;

                .set-scores {
                    text-align: center;
                    margin: 0px auto 5px auto;
                    background-color: #ebf5ff;
                    padding: 10px 0;
                    color: #409eff;

                    .icon-shezhi {
                        margin-right: 5px;
                    }

                }

                .left-body {
                    // max-height: 530px;
                    height: 75vh;
                    overflow-y: scroll;

                    .left-m1 {
                        padding-top: 10px;


                        .left-type {
                            display: flex;
                            margin-bottom: 5px;
                            font-size: 14px;

                            .left-num {
                                padding: 0 2px;
                            }
                        }


                        .left-btns {
                            display: flex;
                            flex-wrap: wrap;
                            width: 230px;

                            .content-left-btn {
                                background-color: #fff;
                                border: 1px solid #e3e3e3;
                                color: #908f8f;
                                width: 28px;
                                height: 28px;
                                margin: 5px 10px 5px 0;
                            }

                            .content-left-btn:hover {
                                background-color: #e5eaf3;
                            }
                        }

                        .el-divider {
                            margin: 8px 0;
                        }



                    }
                }


            }
        }

        .right-body {
            min-width: 300px;
            position: relative;

            .right {
                min-height: 340px;
                min-width: 950px;
                background-color: #fff;
                margin: 20px 0;
                padding: 20px;
                position: sticky;


                .right-btn {
                    display: flex;
                    justify-content: end;

                    .right-head-btn {
                        margin-bottom: 20px;

                        .icon-tianjia1 {
                            font-size: 13px;
                            padding-right: 5px;
                            padding-top: -2px;
                        }
                    }
                }

                .right-box {
                    min-height: 100px;
                    border: 1px solid #e3e3e3;
                    margin-bottom: 30px;

                    .right-head {
                        height: 60px;
                        background-color: #f7f8fa;
                        padding: 20px;

                        .head-m1 {
                            display: flex;
                            justify-content: space-between;

                            .head-m1-title {
                                display: flex;
                                width: 300px;

                                .index-num {
                                    margin-top: 8px;
                                }
                            }

                            .m2-right {
                                display: flex;

                                .icon-shanchu {
                                    margin: 2px 15px 0 0;
                                }

                                .head-num {
                                    padding: 0 5px;
                                }

                            }
                        }
                    }

                    .right-body {
                        border-bottom: 1px dashed #dededf;
                        min-height: 50px;
                        max-width: 948px;

                        .small-num {
                            border-top: 1px solid #409eff;
                            padding: 20px 20px 0px 20px;
                            display: flex;
                            justify-content: space-between;

                            .ques-num {
                                font-size: 16px;
                                margin: 8px 0 0 20px;
                                // background-color: #e5eaf3;
                            }

                            .question-scorce-right {
                                .icon-shanchu {
                                    margin-right: 30px;
                                }

                                .score-word {
                                    margin-right: 0px;
                                }

                                .right-body-input {
                                    padding: 0px 5px;
                                }

                            }
                        }
                    }

                    .right-foot {
                        margin: 10px 20px;
                        display: flex;



                        .spancing {
                            padding: 5px 20px;
                            color: rgb(222, 219, 219);
                        }

                        .choice-word {
                            color: #409eff;
                            margin-top: 5px;
                            cursor: pointer;
                        }

                    }

                    .icon-shanchu:hover {
                        color: #409eff;
                        cursor: pointer;
                    }
                }

            }
        }

    }

    .dialog {
        padding: 20px;

        .dialog-header {
            font-size: 19px;
            color: #606266;
        }



        .questions-head {
            display: flex;
            justify-content: space-between;
            margin: 0 10px;
            font-size: small;
            border-bottom: 1px solid rgb(243, 242, 242);

            .head-content-left {
                display: flex;

                .option {
                    display: flex;
                    padding: 0 5px;

                    .option-word {
                        margin-top: 3px;
                        padding: 5px;
                        font-size: 14px;
                    }

                    .select {
                        padding-top: 6px;
                        width: 100px;
                    }

                    .multiple-select {
                        padding-top: 6px;
                        width: 240px;

                    }
                }
            }

            .head-content-right {
                .input {
                    height: 30px;
                }
            }

        }

        .change {
            display: flex;
            max-width: 220px;
            margin: 10px 0 10px 10px;

            .change-item {
                background-color: #f7f8fa;
                padding: 10px;
                margin-right: 5px;
                display: flex;

                .choiced-num {
                    font-size: 11px;
                    margin-left: 5px;
                    padding: 2px 8px;
                    background-color: rgb(249, 13, 13);
                    border-radius: 15px;
                    color: white;
                }
            }

            .active {
                color: #409eff;
            }
        }

        .table {
            max-height: 50vh;
            min-height: 50vh;
            margin: auto;
            width: 1010px;


        }

        .foot {
            overflow: hidden;
            display: flex;
            justify-content: end;
            margin-right: 80px;

            .question-foot {
                display: flex;
                justify-content: center;
                position: fixed;

                .pagination {
                    margin-bottom: 10px;
                    position: absolute;

                }

            }
        }
    }

    .dialog2 {
        .dialog-header {
            font-size: 19px;
            color: #606266;
        }
    }
}
</style>